<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select filterable @change="changeBrand" v-model="queryParams.brandId"
                    class="zs-select-md zs-space-right-sm" placeholder="品牌" remote remote-show-suffix
                    :remote-method="(name) => name && getBrandDownList(name)">
                    <el-option v-for="item in brandDownList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-button class="zs-btn-plain" @click="queryList()"> 查询 </el-button>
            </span>
        </div>

        <div class="zs-card zs-table-page-content">
            <div class="zs-layout-flex-row zs-layout-justify-between">
                <template v-for="(item, index) in grayCardList" :key="index">
                    <GrayCard class="zs-layout-grow" :class="{ 'zs-space-right': index < grayCardList.length - 1 }"
                        :isBlueCard="true" :list="item.list" :title="item.title"></GrayCard>
                </template>
            </div>
            <!-- :maxHeight="500" -->
            <hsPageTable :maxHeight="350" :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data"
                :cloumns="tableData.cloumns" @pageChange="pageChange" @onSortChange="tableSortChange" :isHavePage="true">
                <template #bottomTip>
                    <div class="zs-text-gray-dark zs-text-sm zs-space-top">*数据区间：{{ curDate }}</div>
                </template>
            </hsPageTable>
        </div>
    </div>
</template>
<script setup>
import dbPublicApi from '@/api/dbPublic'
import GrayCard from '@/DbUiComponents/grayCard'
import { brandAnalysisApi } from '@/api/SpecialReport/index'
import { reactive, ref } from "vue"
import { toThousands } from '@/utils/number-util'
import { useRouter, useRoute } from 'vue-router'
let route = useRoute()
let router = useRouter();
let { brandId, brandName } = route.query

// 查询条件
let queryParams = reactive({
    brandId,
    // brandName,
    //   firstFormat:'',
    orderBy: [],
    pageNo: 1,
    pageSize: 30
})

let curDate = ref('')
const queryDataUpdateTime = async () => {
    await dbPublicApi.queryMonthsTimeApi().then(res => {
        if (res.data.code == 200) {
            const year = res.data.data.split('-')[0]
            curDate.value = `${Number(year) - 2}年-${year}年`
        }
    })
}

let brandDownList = ref([])
function getBrandDownList(name) {
    let curParams = name ? { name, typeCode: 'pp' } : { typeCode: 'pp', pageNo: 1, pageSize: 10 }
    brandAnalysisApi.queryBrandDownListApi(curParams).then(res => {
        let resData = res.data
        if (resData.errorCode == 200) {
            brandDownList.value = resData.data;
        }
    })
}
getBrandDownList(brandName)

const changeBrand = (data) => {
    const i = brandDownList.value.findIndex(item => { return item.id == data })
    brandName = brandDownList.value[i].name
    queryList()
}

// const grayCardList = ref([
//     {
//         title: '1-6月收入',
//         list: [
//             { label: '预算', value: '7010', thousand: true, unit: '', color: '1', des: '', labelDes: '123', labelDesColor: 1 },
//             { label: '实际', value: '7790', unit: '', color: '' },
//             { label: '完成率', value: '112', unit: '%', color: '' },
//             { label: '完成率', value: '112', unit: '%', color: '' },
//         ]
//     },
//     {
//         title: '1-6月收入',
//         list: [{ label: '预算', value: '7,010', unit: '%', color: '1', des: '' }, { label: '实际', value: '7,790', unit: '', color: '' }, { label: '完成率', value: '112', unit: '%', color: '' }]
//     },
//     {
//         title: '1-6月收入',
//         list: [{ label: '预算', value: '7,010', unit: '%', color: '1', des: '' }, { label: '实际', value: '7,790', unit: '', color: '' }, { label: '完成率', value: '112', unit: '%', color: '' }]
//     }
// ])
const grayCardList = ref([])
const cardList = () => {
    brandAnalysisApi.wxBrandPerformanceApi({ brandId: queryParams.brandId }).then(res => {
        let resData = res.data
        if (resData.errorCode == 200) {
            grayCardList.value = []
            resData.data.map((card, cardIndex) => {
                grayCardList.value.push({
                    title: card.performanceType,
                    list: []
                })
                card.data.map(child => {
                    const yonyBasisStr = child.yonyBasisStr != null && child.yonyBasisStr.charAt(0) == '-' && child.yonyBasisStr != '-' ? child.yonyBasisStr.substring(1) : child.yonyBasisStr
                    const upOrDownStr = child.yonyBasisStr != null && child.yonyBasisStr.charAt(0) == '-' && child.yonyBasisStr != '-' ? '↓' : child.yonyBasisStr != null && child.yonyBasisStr.charAt(0).length > 0 && child.yonyBasisStr != '-' ? '↑' : ''
                    grayCardList.value[cardIndex].list.push({
                        value: toThousands(child.valueStr),
                        unit: child.unit,
                        label: `${child.yearStr}年`,
                        labelDes: `${upOrDownStr}${yonyBasisStr}`,
                        labelDesColor: child.changeColor,
                    })
                })
            })
        }
    })
}

// 表格数据
let tableData = reactive({
    loading: false,
    data: [],
    total: 0,
    cloumns: [
        {
            prop: 'projectName', label: '项目', align: 'left', type: 'html',
            render: ({ row }) => {
                return <span class="zs-link" onClick={() => jumpDetailPage(row)}>{row.projectName}</span>
            }
        },
        {
            prop: 'sale', label: '销售额', align: 'right', sort: true,
            type: 'customMethods', methods: (row, empty) => row.sale ? toThousands(row.sale) : empty
        },
        {
            prop: 'avMonthSales', label: '月均销售额', align: 'right', sort: true,
            type: 'customMethods', methods: (row, empty) => row.avMonthSales ? toThousands(row.avMonthSales) : empty
        },
        {
            prop: 'monAvPlEff', label: '月均坪效', align: 'right', sort: true,
            type: 'customMethods', methods: (row, empty) => row.monAvPlEff ? toThousands(row.monAvPlEff) : empty
        },
        {
            prop: 'smInvrecamtl', label: '租费', align: 'right', sort: true,
            type: 'customMethods', methods: (row, empty) => row.smInvrecamtl ? toThousands(row.smInvrecamtl) : empty
        },
        {
            prop: 'rentSaleRPx', label: '租售比', align: 'right', sort: true,
            type: 'customMethods', methods: (row, empty) => row.rentSaleRPx ? (row.rentSaleRPx * 100).toFixed(2) + '%' : empty,
        },
    ]
})

function jumpDetailPage(row) {
    let query = {
        rid: 'SpecialReport_BrandAnalysis_DetailList_page',
        rTitle: '品牌分析明细',
        brandId: queryParams.brandId,
        brandName: brandName,
        projectCode: row.projectCode
    }
    if (process.env.NODE_ENV == 'development') {
        router.push({
            path: '/SpecialReport/brandAnalysis/detailList',
            query,
        })
    } else {
        router.push({
            path: '/page/routeController/index',
            query,
        })
    }
}

function tableSortChange(val) {
    let curSortColumn = []
    val.forEach(el => {
        // let curKey = el.prop.replace(/[A-Z]/g, '_$&').toLowerCase()
        let curType = el.prop + ',' + el.type
        curSortColumn.push(curType)
    })
    queryParams.orderBy = curSortColumn
    queryList()
}

// 分页变化
function pageChange(page) {
    queryParams.pageNo = page.current
    queryParams.pageSize = page.pageSize
    queryList()
}

function queryList() {
    tableData.loading = true
    // let params = Object.assign({}, queryParams)
    // params.brandId = params.brandId || 'all'
    // params.firstFormat = params.firstFormat || 'all'
    brandAnalysisApi.wxBrandPerformanceListApi(queryParams).then(res => {
        let resData = res.data
        if (resData.errorCode == 200) {
            tableData.data = resData.data
            tableData.total = resData.totalCount
        }
        tableData.loading = false
    })
}

const init = async () => {
    await queryDataUpdateTime()
    cardList()
    queryList()
}
init()
</script>
  
<style scoped lang="scss"></style>
  